<html>
    <head>
        <script type="text/javascript" src="hex_hmac_sha1.js"></script>
        <script type="text/javascript" src="hex_md5.js"></script>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="busuanzi.pure.mini.js"></script>
        <link rel="stylesheet" type="text/css" href="tools.css">
        <title>阿里云签名工具</title>
        <meta charset="utf-8">
    </head>
    
    <body>
        <div class="heading-center">
                <h1 align="center">欢迎使用阿里云签名工具</h1>
                <p align="center" style="color: black;">开源地址：<strong><a href="https://github.com/jiejieTop/mqttclient">https://github.com/jiejieTop/mqttclient</a></strong>.</p>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">填入设备信息</div>
        </div>
        
        <div class="wrapper-all" id="connectConfig">
            <div class="wrapper">
                <div class="left">
                    <div class="connection1">
                        <div class="form-group">
                            <label for="productKey">productKey *</label>
                            <input type="text" class="form-control" id="productKey" name="productKey" placeholder="*">
                        </div>

                        <div class="form-group">
                            <label for="deviceName">deviceName *</label>
                            <input type="text" class="form-control" id="deviceName" name="deviceName" placeholder="*">
                        </div>

                        <div class="form-group">
                            <label for="deviceSecret">deviceSecret *</label>
                            <input type="text" class="form-control" id="deviceSecret" name="deviceSecret" placeholder="*">
                        </div>

                        
                        <div class="form-group">
                                <label for="writeClientId">clientId *</label>
                                <input type="text" class="form-control" id="writeClientId" name="writeClientId" placeholder="必填，但可任意填...">
                        </div>
                        
                    </div>
                </div>

                <div class="right">
                    <div class="connection-jiejie">
                        <div class="form-group">
                            <label for="timestamp">timestamp</label>
                            <input type="text" class="form-control" id="timestamp" name="timestamp" placeholder="可选填...">
                        </div>
                    
                        <div class="form-group">
                            <label for="signMethod">method</label>
                            <select type="text" class="form-control" id="signMethod" name="signMethod">
                            <option value="hmacmd5">hmacmd5</option>    
                            <option value="hmacsha1" selected>hmacsha1</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="secureMode">securemode</label>
                            <select type="text" class="form-control" id="secureMode" name="secureMode">
                            <option value="3" selected>TCP</option>    
                            <option value="2">TLS</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="region">region</label>
                            <select type="text" class="form-control" id="region" name="region">
                            <option value="cn-qingdao">华北 1</option>    
                            <option value="cn-beijing">华北 2</option>
                            <option value="cn-zhangjiakou">华北 3</option>    
                            <option value="cn-huhehaote">华北 5</option>
                            <option value="cn-hangzhou">华东  1</option>    
                            <option value="cn-shanghai" selected>华东  2</option>
                            <option value="cn-shenzhen">华南 1</option>    
                            <option value="cn-heyuan">华南 2</option>
                            <option value="cn-chengdu">西南 1</option>
                            </select>
                        </div>
                    </div> 
                </div>
            </div>
        </div>

        <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">生成签名信息</div>
        </div>
        
        <div class="wrapper1">
            <button type="button" id="importTemplate" name="importTemplate" onclick="import_template()" class="btn btn-primary">导入模板</button>
            <button type="button" id="submit" name="submit" onclick="generate_code()" class="btn btn-primary">生成签名</button>
        </div>

        <div class="wrapper-all" id="connectConfig">
            <div class="wrapper">
                <div class="left">
                    <div class="connection1">
                        <div class="form-group">
                            <label for="clientId">生成的客户端ID</label>
                            <textarea class="form-control1" id="clientId" name="clientId" rows="1"></textarea>
                        </div>

                        <div class="form-group">
                            <label for="brokerAddress">生成的服务器地址</label>
                            <textarea class="form-control1" id="brokerAddress" name="brokerAddress" rows="1"></textarea>
                        </div>
                    </div>
                </div>

                <div class="right">
                    <div class="connection-jiejie">
                        <div class="form-group">
                            <label for="userName">生成的用户名</label>
                            <textarea class="form-control1" id="userName" name="userName" rows="1"></textarea>
                        </div>
                    
                        <div class="form-group">
                            <label for="generateCode">生成的秘钥</label>
                            <textarea class="form-control1" id="password" name="password" rows="1"></textarea>
                        </div>
                    </div> 
                </div>
            </div>
        </div>

        <div class="statistics">
            <span id="busuanzi_container_site_pv">
                本站总访问量<span style="color:red" id="busuanzi_value_site_pv" ></span>次
            </span>
        </div>
        <br>
    </body>

    <script>
        var pk, dn, ds, ts, ci, sm, pw;

        function code_render(code, context) {
            var template = code;
            return template.replace(/\{\{(.*?)\}\}/g, (match, key) => context[key]);
        }

        function get_value() {
            pk = document.getElementById("productKey").value;
            dn = document.getElementById("deviceName").value;
            ds = document.getElementById("deviceSecret").value;
            ts = document.getElementById("timestamp").value;
            ci = document.getElementById("writeClientId").value;
            sm = document.getElementById("signMethod").value;
            pw = document.getElementById("password");
        }

        function import_template() {

            get_value();

            if (pk != "" ||dn != "" || ds != "" || ci != "") {
                var is_yes = window.confirm("已经填写数据，是否导入模板覆盖填写的内容？");
                if (!is_yes)
                    return false;//返回
            }

            $("#productKey").val("a1w7XupONEX");
            $("#deviceName").val("test1");
            $("#deviceSecret").val("2H1FiqEvyovF8bdckg6RjBcO2LAgGhwu");
            // $("#timestamp").val(Date.parse(new Date()));
            $("#writeClientId").val("any");
        }

        function generate_code() {
            var id = '{{writeClientId}}|securemode={{secureMode}},signmethod={{signMethod}}|';
            var host = '{{productKey}}.iot-as-mqtt.{{region}}.aliyuncs.com'
            var name = '{{deviceName}}&{{productKey}}'

            get_value();
            json = traverse_get_json();

            if (pk == null || pk == "" || dn == null || dn == "" 
                            || ds == null || ds == "" || ci == null || ci == "") {
                    alert("productKey,deviceName,deviceSecret,clientId can not be empty");
                    return;
            }

            var options = {
                    productKey: pk,
                    deviceName: dn,
                    timestamp: ts,
                    clientId: ci
            }
            if (ts == null || ts == "") {
                    options = {
                            productKey: pk,
                            deviceName: dn,
                            clientId: ci
                    }
            }
            var keys = Object.keys(options).sort();
            // 按字典序排序
            keys = keys.sort();
            var list = [];
            keys.forEach(function(key) {
                    list.push(key + options[key]);
            });
            var contentStr = list.join('');
            var sign="";
            if (sm == "hmacmd5") {
                    sign = hex_hmac_md5(ds, contentStr);
            } else if (sm == "hmacsha1") {
                    sign = hex_hmac_sha1(ds, contentStr);
            } else {
                    alert("method is invalid");
            }

            $("#clientId").val(code_render(id, json));
            $("#brokerAddress").val(code_render(host, json));
            $("#userName").val(code_render(name, json));
            pw.value = sign.toUpperCase();

        }
        
        function traverse_get_json() {
            var json = {};
            var controls = document.getElementsByTagName('input');
            for (var i=0; i<controls.length; i++) {
                if (controls[i].type=='text') {
                    var id = controls[i].name;
                    json[id] = controls[i].value;
                }
                else if (controls[i].type=='checkbox') {
                    var id = controls[i].name;
                    if (controls[i].checked == true) {
                        json[id] = 1;
                    } else {
                        json[id] = 0;
                    }
                }        
            }
            controls = document.getElementsByTagName('select');
            for (var i=0; i<controls.length; i++) {
                var index = controls[i].selectedIndex ; 
                var id = controls[i].name;
                json[id] = controls[i].options[index].value;
            }

            console.log(json);
            return json;
        }
    </script>

</html>
